<template>
    <div id="todo-list-example">
      <form action="http://www.baidu.com">
        <input
          v-model="newTodoText"
          v-on:@keyup.alt.67="addNewTodo"
          placeholder="Add a todo"
          v-focus
        >
        <input type="button" value="Click" v-on:click.self="addNewTodo">
        <button v-on:click.capture="warn('Form cannot be submitted yet.', $event)">Submit</button>
      </form>
      
      <ul>
        <!--<li
          is="todo-item"
          v-for="(todo, index) in todos"
          v-bind:title="todo"
          v-on:remove="todos.splice(index, 1)"
        ></li>-->
        <todo-item
          v-for="(todo, index) in todos"
          v-bind:title="todo"
          v-on:remove="todos.splice(index, 1)"
        ></todo-item>
      </ul>
    </div>
    
</template>
<style>
</style>
  
<script>
import Vue from 'vue'
Vue.directive('focus', {
  bind: function (el) {
    console.log(el)
  },
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  },
  update: function () {
    console.log('我更新了')
  }
})
Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  props: ['title']
})
export default {
  data () {
    return {
      newTodoText: '',
      todos: [
        'Do the dishes',
        'Take out the trash',
        'Mow the lawn'
      ]
    }
  },
  methods: {
    addNewTodo: function () {
      if (this.newTodoText !== '') {
        this.todos.push(this.newTodoText)
        this.newTodoText = ''
      }
    },
    warn: function (message, event) {
      // 现在我们可以访问原生事件对象
      // if (event) event.preventDefault()
      /* eslint no-undef: "error" */
      /* eslint-env browser */
      alert(message + ' : ' + event.type)
    }
  }
}
</script>


